<template>
	<div class="books_detail_wrapper">
		<div :class="['content', { empty: !bookData.pdfPath }]">
			<template v-if="!bookData.pdfPath">
				<el-empty :image-size="100" description="管理员未上传书籍"></el-empty>
			</template>
			<template v-else>
				<iframe :src="bookData.pdfPath" frameborder="0"></iframe>
			</template>
		</div>
		<div class="info_comment">
			<el-button size="small" type="primary" class="comment" @click="handleComment" v-if="activeName === '2'">我要发言</el-button>
			<ul class="tabhead">
				<li :class="{ active: activeName === '1' }" @mouseenter="handleMouseenter('1')">书籍简介</li>
				<li :class="{ active: activeName === '2' }" @mouseenter="handleMouseenter('2')">体会交流</li>
			</ul>
			<div class="content">
				<template v-if="activeName === '1'">
					<div class="book_intro_wrapper">
						<h2>{{ bookData.name }}</h2>
						<p>出版时间：{{ bookData.pubTime }}</p>
						<p>阅读次数：{{ bookData.clickNum }}</p>
						<p>下载次数：{{ bookData.downloadNum }}</p>
						<div class="des">简介：{{ bookData.des }}</div>
					</div>
				</template>
				<template v-if="activeName === '2'">
					<div class="book_comment_wrapper" v-infinite-scroll="loadBookComment" :infinite-scroll-disabled="isDisabled" v-loading="loading">
						<template v-if="isLoad && !loading && commentData.length === 0">
							<el-empty :image-size="100" description="暂无评论"></el-empty>
						</template>
						<template v-else>
							<dl v-for="(item, index) in commentData" :key="index">
								<dt>
									<el-avatar :size="32" :src="circleUrl"></el-avatar>
									<h3>匿名评论</h3>
									<el-rate v-model="item.score || 0" disabled show-score text-color="#ff9900" score-template="{value}.0"></el-rate>
								</dt>
								<dd class="cnt">{{ item.content }}</dd>
								<dd class="bot">
									{{ $moment(item.createTime).format('YYYY-MM-DD') }}
									<el-button type="text" icon="el-icon-chat-dot-round" @click="handleReplyComment(item.id)">回复({{ item.childList.length }})</el-button>
								</dd>
								<dd class="reply">
									<p v-for="(v, i) in item.childList" :key="i">
										<el-avatar :size="24" :src="circleUrl"></el-avatar>
										{{ v.content }}
									</p>
								</dd>
							</dl>
							<p class="loading" v-if="loading">加载中</p>
							<p class="moreover" v-if="!loading && moreover">没有更多了</p>
						</template>
					</div>
				</template>
			</div>
		</div>
		<el-dialog width="800px" :title="dialogTitle" :visible.sync="commentDialog" append-to-body :close-on-click-modal="false" @close="handleDialogClose">
			<el-form :model="commentForm" :rules="commentRule" ref="commentForm" class="comment_form_dialog">
				<el-form-item prop="score" v-if="commmentType === 'comment'" label="书籍评分" label-width="80">
					<el-rate v-model="commentForm.score" show-text></el-rate>
				</el-form-item>
				<el-form-item prop="content">
					<el-input type="textarea" :autosize="{ minRows: 5, maxRows: 8 }" v-model="commentForm.content" placeholder="输入内容…"></el-input>
				</el-form-item>
			</el-form>
			<template slot="footer">
				<el-button size="medium" @click="commentDialog = false">取消</el-button>
				<el-button size="medium" type="primary" @click="handleSubmitComment" :loading="btnLoading">确定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import { mapActions } from 'vuex';
import { addEvaluateRequest } from '@/api/web/sysEvaluate';
export default {
	data() {
		return {
			activeName: '1',
			bookData: {},
			loading: false,
			listQuery: {
				page: 1,
				limit: 6
			},
			commentData: [],
			commentCount: 0,
			isLoad: false,
			commentDialog: false,
			commmentType: 'comment',
			commentForm: {},
			commentRule: {
				content: { required: true, message: '请输入留言内容', trigger: 'blur' }
			},
			btnLoading: false,
			circleUrl: require('@/assets/img/defaultAvatar.png')
		};
	},
	computed: {
		bookId() {
			return this.$route.params.id;
		},
		moreover() {
			return this.listQuery.page * this.listQuery.limit >= this.commentCount;
		},
		isDisabled() {
			return this.loading || this.moreover;
		},
		dialogTitle() {
			switch (this.commmentType) {
				case 'comment':
					return '体会交流';
					break;
				case 'reply':
					return '回复';
					break;
				default:
					return '体会交流';
					break;
			}
		}
	},
	watch: {
		activeName(val) {
			if (val === '1') return false;
			this.commentCount = [];
			this.listQuery.limit = 6;
			this.getCommentListData();
		}
	},
	mounted() {
		this.getBooksDetail();
	},
	methods: {
		...mapActions(['getJournalDetail', 'getCommentData']),

		//切换
		handleMouseenter(type) {
			this.activeName = type;
		},

		//获取书籍详情
		getBooksDetail() {
			this.getJournalDetail(this.bookId).then(res => {
				this.bookData = { ...res };
			});
		},

		//获取评论列表
		async getCommentListData() {
			this.loading = true;
			await this.getCommentData({ page: '1', limit: this.listQuery.limit, type: '1', resId: this.bookId }).then(res => {
				let datas = !res.data
					? []
					: res.data.map(item => {
							return { ...item, score: parseFloat(item.score || 0) };
					  });
				this.commentCount = parseInt(res.count);
				this.commentData = [...datas];
			});
			this.isLoad = true;
			this.loading = false;
		},

		//加载书籍评论
		loadBookComment() {
			if (this.moreover) return false;
			this.listQuery.page++;
			this.listQuery.limit = this.listQuery.page * 6;
			this.getCommentListData();
		},

		//点击评论
		handleComment() {
			this.commmentType = 'comment';
			this.commentDialog = true;
			this.commentForm = {};
		},

		//回复评论
		handleReplyComment(id) {
			this.commmentType = 'reply';
			this.commentDialog = true;
			this.commentForm = { pid: id, score: 0 };
		},

		//提交评论
		handleSubmitComment() {
			this.$refs['commentForm'].validate(valid => {
				if (!valid) return false;
				if (this.commmentType === 'comment') {
					this.commentRequest('1');
				} else if (this.commmentType === 'reply') {
					this.commentRequest('2');
				}
				this.btnLoading = true;
			});
		},

		//添加体会交流请求
		async commentRequest(type) {
			let params = { ...this.commentForm, resId: this.bookId, type, resType: '11' };
			let result = await addEvaluateRequest(params).then(res => res.data);
			this.btnLoading = false;
			if (result.code === '0') {
				this.$refs['commentForm'].resetFields();
				this.commentDialog = false;
				this.listQuery.page = 1;
				this.commentData = [];
				this.getCommentListData();
			}
		},

		handleDialogClose() {
			this.$nextTick(() => {
				this.$refs['commentForm'].resetFields();
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.books_detail_wrapper {
	display: flex;
	height: 960px;
	padding-bottom: 64px;
	.content {
		flex: 1;
		overflow: hidden;
		background-color: #fff;
		&.empty {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		iframe {
			width: 100%;
			height: 100%;
		}
	}
	.comment {
		position: absolute;
		top: 15px;
		right: 15px;
		z-index: 1;
		border-color: #357c65;
		background-color: #357c65;
	}
	.info_comment {
		display: flex;
		flex-direction: column;
		position: relative;
		width: 400px;
		flex-shrink: 0;
		margin-left: 40px;
		background-color: #fff;
		.tabhead {
			display: flex;
			height: 62px;
			border-bottom: solid 2px #e4e7ed;
			li {
				height: 62px;
				line-height: 62px;
				font-size: 18px;
				margin: 0 20px;
				border-bottom: solid 2px transparent;
				&.active {
					color: #357c65;
					font-weight: bold;
					border-bottom-color: #357c65;
				}
			}
		}
		.content {
			flex: 1;
			overflow: auto;
		}
	}
}
.book_intro_wrapper {
	padding: 20px;
	height: 100%;
	box-sizing: border-box;
	overflow: auto;
	h2 {
		font-size: 18px;
		font-weight: normal;
	}
	p {
		font-size: 14px;
		margin-top: 10px;
		color: #999;
	}
	.des {
		font-size: 14px;
		margin-top: 10px;
		line-height: 24px;
		color: #999;
	}
}
.book_comment_wrapper {
	height: 100%;
	overflow: auto;
	padding: 10px 20px;
	box-sizing: border-box;
	dl {
		padding: 15px 0 5px;
		border-bottom: solid 1px rgba(0, 0, 0, 0.05);
	}
	dt {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		h3 {
			margin-left: 10px;
			flex: 1;
			overflow: hidden;
		}
	}
	dd.cnt {
		font-size: 14px;
		line-height: 24px;
		color: rgba(0, 0, 0, 0.56);
		margin-bottom: 10px;
	}
	dd.bot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		color: #999;
		padding-bottom: 10px;
		.el-button--text {
			padding: 0;
			color: #357c65;
		}
	}
	dd.reply {
		padding-top: 5px;
		p {
			color: #999;
			position: relative;
			line-height: 24px;
			padding: 10px 0 10px 30px;
			border-top: dashed 1px #eee;
		}
		.el-avatar {
			position: absolute;
			top: 10px;
			left: 0;
		}
	}
	p.loading,
	p.moreover {
		color: #ccc;
		text-align: center;
		padding: 15px 0 5px;
	}
	p.loading::after {
		content: '...';
		animation: showDot 1.5s linear infinite;
	}
}
.comment_form_dialog ::v-deep {
	width: 100%;
	padding: 20px;
	.el-form-item {
		display: flex;
		align-items: center;
		width: 100%;
	}
	.el-form-item__content {
		flex: 1;
		overflow: hidden;
	}
	.el-textarea__inner {
		resize: none;
		font-family: 'Microsoft Yahei';
	}
}
@keyframes showDot {
	0% {
		content: '';
	}
	33.3333% {
		content: '.';
	}
	66.6666% {
		content: '..';
	}
	100% {
		content: '...';
	}
}
</style>
